<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="../css/swiper.min.css">
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>Swiper demo</title>
  <style type="text/css">
    html, body {
	position: relative;
	height: 100%;
}

body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 0.875rem;
	color: #000;
	margin: 0;
	padding: 0;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 1.125rem;
	background: #fff;
	height: 5.25rem;
	border: 1px solid #ccc;
	width: 100%;
}

.refresh {
	position: absolute;
	bottom: 100%;
	text-align: center;
	width: 100%;
}

.loadmore {
	position: absolute;
	line-height: 1.25rem;
	top: 100%;
	text-align: center;
	width: 100%;
}

.swiper-wrapper {
	height: 2000px;
	transition-duration: 0ms;
	transform: translate3d(0px, 0px, 0px);
}
.rank{
	height: 5.25rem;
	line-height: 5.25rem;
	margin-left: 3rem;
	float: left;
}
.rank img{
	vertical-align: middle;
	border-radius: 3.5rem;
	width: 3.5rem;
	height: 3.5rem;
	background-color: #f00;
}
.rank span{
	vertical-align: middle;
}
.rank .name{
	vertical-align: middle;
}
.ztrs{
	float: right;
	margin-right: 3rem;
	height: 5.25rem;

		display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}
.ztrs span{
		color: rgb(255,194,100);
}
.ztrs p .num{
    font-size: 0.8rem;
    color: #000;
}
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container swiper-container-vertical swiper-container-free-mode">
    <div class="swiper-wrapper">
    <div class="refresh">释放刷新</div>
      <div class="swiper-slide">
      	<div class="rank">
      		<span>1</span>
      		<img />
      		<span class="name">燕子</span>
      	</div>
      	<div class="ztrs">
      		<p>
      			<span>341人</span>
      				<br>
      			<span class="num">直推人数</span>
      	</p>
      	</div>
      </div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
      <div class="swiper-slide">Slide 12</div>
      <div class="swiper-slide">Slide 13</div>
      <div class="swiper-slide">Slide 14</div>
      <div class="swiper-slide">Slide 15</div>
      <div class="swiper-slide">Slide 16</div>
      <div class="swiper-slide">Slide 17</div>
      <div class="swiper-slide">Slide 18</div>
      <div class="swiper-slide">Slide 19</div>
      <div class="swiper-slide">Slide 20</div>
      <div class="loadmore">加载更多</div>
    </div>
    <div class="swiper-scrollbar"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
	refreshEnd= false;
	times=0;//加载次数
	oriSpeed=300
    var swiper = new Swiper('.swiper-container',{
		speed: oriSpeed,
		slidesPerView: 'auto',
		freeMode: true,
        direction: 'vertical',
		setWrapperSize: true,
		//滚动条
		scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
        },
		on:{
			//下拉释放刷新
			touchEnd: function(){
				swiper=this
				refreshText=swiper.$el.find('.refresh')
                if(this.translate>100){
	                swiper.setTransition(this.params.speed);
                    swiper.setTranslate(100);
		            swiper.touchEventsData.isTouched=false;//跳过touchEnd事件后面的跳转(4.0.5)
		            refreshText.html('刷新中')

		            swiper.allowTouchMove=false;
					setTimeout(function(){//模仿AJAX
						swiper.removeAllSlides();
						for(i=0;i<20;i++){
						swiper.appendSlide('<div class="swiper-slide">New Slide'+(i+1)+'</div>');
						refreshText.html('刷新完成');
						refreshEnd=true;
						swiper.allowTouchMove=true;
						}
					},1000)

                 }

            },
			touchStart: function(){
				if(refreshEnd==true){
                    this.$el.find('.refresh').html('释放刷新');
					refreshEnd=false;
				}
            },

			//加载更多
			momentumBounce: function(){//非正式反弹回调函数，上拉释放加载更多可参考上例
				swiper=this
				if(swiper.translate<-100){

					swiper.allowTouchMove=false;//禁止触摸
					swiper.params.virtualTranslate=true;//定住不给回弹
                    setTimeout(function(){//模仿AJAX
					    for(m=0;m<20;m++){
					        swiper.appendSlide('<div class="swiper-slide">moreSlide'+(times*20+m+1)+'</div>');
						}
						swiper.params.virtualTranslate=false;
						swiper.allowTouchMove= true;
						times++
				    },1000)

				}
			},
		}
	});
  </script>
</body>
</html>
